<template>
	<div class="my-password">
		<custom-header-bar bg="1" title="密码管理" backStatus="1"></custom-header-bar>
		<div class="content">
			<div class="item-wrapper">
				<image class="icon" src="/static/my-password.png" mode="aspectFit"></image>
				<div class="input-wrapper">
					<input class="input" placeholder-style="color:rgba(0, 0, 0, 0.25)" v-model="word1"
						placeholder="请输入原密码" />
				</div>
			</div>
			<div class="item-wrapper">
				<image class="icon" src="/static/my-password.png" mode="aspectFit"></image>
				<div class="input-wrapper" v-if="passwordType2 === 'type'">
					<input class="input" placeholder-style="color:rgba(0, 0, 0, 0.25)" type="text" v-model="word2"
						placeholder="设置新密码，不少于四位字符" />
				</div>
				<div class="input-wrapper" v-else>
					<input class="input" placeholder-style="color:rgba(0, 0, 0, 0.25)" type="password" v-model="word2"
						placeholder="设置新密码，不少于四位字符" />
				</div>
				<image v-if="passwordType2 === 'type'" @click="passwordType2 = 'password'" class="icon"
					src="/static/show-password.png" mode="aspectFit"></image>
				<image v-if="passwordType2 === 'password'" @click="passwordType2 = 'type'" class="icon"
					src="/static/hide-password.png" mode="aspectFit"></image>
			</div>
			<div class="item-wrapper">
				<image class="icon" src="/static/my-password.png" mode="aspectFit"></image>
				<div class="input-wrapper" v-if="passwordType3 === 'type'">
					<input class="input" placeholder-style="color:rgba(0, 0, 0, 0.25)" type="text" v-model="word3"
						placeholder="再次输入密码" />
				</div>
				<div class="input-wrapper" v-else>
					<input class="input" placeholder-style="color:rgba(0, 0, 0, 0.25)" type="password" v-model="word3"
						placeholder="再次输入密码" />
				</div>
				<image v-if="passwordType3 === 'type'" @click="passwordType3 = 'password'" class="icon"
					src="/static/show-password.png" mode="aspectFit"></image>
				<image v-if="passwordType3 === 'password'" @click="passwordType3 = 'type'" class="icon"
					src="/static/hide-password.png" mode="aspectFit"></image>
			</div>
			<div class="bottom">
				<button class="submit-btn" :class="{ active: isActive }" @click="handleClickSubmit">
					保存
				</button>
			</div>
		</div>
	</div>
</template>
<script>
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		modifyWord
	} from "@/api/my";
	import storage from "@/utils/storage";
	export default {
		components: {
			CustomHeaderBar,
		},
		data() {
			return {
				passwordType: "password",
				passwordType2: "password",
				passwordType3: "password",
				word1: "",
				word2: "",
				word3: "",
			};
		},
		computed: {
			isActive() {
				return this.word1 && this.word2 && this.word3;
			},
		},
		methods: {
			handleClickSubmit() {
				if (!this.isActive) return;
				if (this.word2 !== this.word3) {
					uni.$u.toast("新密码两次输入不一致");
					return;
				}
				modifyWord({
					password: this.word1,
					newPassword: this.word2,
				}).then((res) => {
					if (res.data.code === 200) {
						uni.$u.toast("修改成功,请重新登录");
						setTimeout(() => {
							storage.removeUserInfo();
							storage.removeToken();
							uni.redirectTo({
								url: "/pages/moduleLogin/login/login",
							});
						}, 500);
					} else {
						uni.$u.toast(res.data.msg);
					}
				});
			},
			trim(val) {
				return val.replace(/\s+/g, "")
			}
		},
	};
</script>
<style lang="scss" scoped>
	.my-password {
		height: 100%;
		box-sizing: border-box;
		padding: 24upx;
		padding-top: 184upx;
		background-color: #f4f4f4;

		.content {
			width: 100%;
			height: 100%;
			background-color: #fff;
			border-radius: 30upx;
			padding: 0 24upx;
			padding-top: 15upx;
			box-sizing: border-box;
			position: relative;

			.item-wrapper {
				padding: 24upx 0;
				display: flex;
				align-items: center;
				background-color: #ffffff64;
				border-bottom: 1upx solid rgba(0, 0, 0, 0.1);

				.icon {
					width: 40upx;
					height: 40upx;
					margin: 0 7upx;
					padding: 12upx;
				}

				.input-wrapper {
					flex: 1;
					border-left: 1upx solid #ffffff86;

					.input {
						color: rgba(20, 104, 92, 1);
					}
				}
			}

			.bottom {
				margin-top: 650upx;
				text-align: center;

				.submit-btn {
					display: inline-block;
					width: 337upx;
					height: 80upx;
					background: #f2f2f2;
					color: #666666;
					font-size: 34upx;

					&.active {
						background-color: #80d7ce;
						color: #fff;
					}
				}
			}
		}
	}
</style>
